<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数代码多层嵌套(Function code nested in multiple layers)</title>
  <!-- 
  在JavaScript中，函数可以嵌套在多个层级中，这种结构称为多层嵌套函数（nested functions）。嵌套函数是指在一个函数的内部定义另一个函数。以下是关于多层嵌套函数的总结说明：
  一、基本概念
  1. 嵌套函数：
    - 嵌套函数是指在一个函数内部定义的另一个函数。嵌套函数可以访问其外部函数的变量和参数。
    function outerFunction() {
      const outerVar = "我是外部变量";
      function innerFunction() {
          console.log(outerVar); // 访问外部变量
      }
      innerFunction(); // 调用内部函数
    }
    outerFunction(); // 输出: 我是外部变量
  二、作用域链
  1. 访问外部作用域：
    - 嵌套函数可以访问其外部函数的变量和参数，这种特性称为作用域链。内部函数可以“记住”外部函数的状态。
    function outerFunction() {
      let count = 0;
      function innerFunction() {
          count += 1; // 修改外部函数的变量
          console.log(count);
      }
      return innerFunction; // 返回内部函数
    }

    const counter = outerFunction();
    counter(); // 输出: 1
    counter(); // 输出: 2
  三、闭包
  1. 闭包的概念：
    - 当一个函数能够访问其外部作用域的变量时，就形成了闭包。闭包可以实现数据的封装和持久化。
    function createCounter() {
      let count = 0;

      return function() {
        count += 1; // 访问外部变量
        return count;
      };
    }

    const counter = createCounter();
    console.log(counter()); // 输出: 1
    console.log(counter()); // 输出: 2

  四、函数参数和返回值
  1. 参数传递：
    - 嵌套函数可以接收外部函数传递的参数，并利用这些参数进行计算或操作。
    function outerFunction(x) {
      function innerFunction(y) {
        return x + y; // 使用外部函数的参数
      }
      return innerFunction; // 返回内部函数
    }

    const addFive = outerFunction(5);
    console.log(addFive(3)); // 输出: 8

  五、注意事项
  1. 性能考虑：
    - 嵌套函数和闭包可能会导致内存占用增加，因为外部函数的变量在内部函数中保持引用，可能导致内存泄漏。

  2. 可读性：
    - 过多的嵌套函数可能会影响代码的可读性和维护性，建议适度使用。

  六、总结
  - 多层嵌套函数是指在一个函数内部定义另一个函数，内部函数可以访问外部函数的变量和参数。
  - 嵌套函数利用作用域链和闭包的特性，可以实现数据的封装和持久化。
  - 嵌套函数可以接收外部函数的参数，并在内部进行操作。
  - 在使用嵌套函数时要注意性能和可读性问题。
    -->
</head>
<body>

  <script>
    // 1. 嵌套函数
    function outerFunction() {
      let count = 0;

      function innerFunction() {
        count += 1;
        return count;
      }

      return innerFunction;
    }

    const counter = outerFunction();
    console.log(counter()); // 输出: 1
    console.log(counter()); // 输出: 2

    // 2. 闭包
    function createCounter() {
      let count = 0;

      return function() {
        count += 1;
        return count;
      };
    }

    const counter1 = createCounter();
    console.log(counter1()); // 输出: 1
    console.log(counter1()); // 输出: 2

    // 3. 嵌套函数接收外部参数
    function outerFunction(x) {
      function innerFunction(y) {
        return x + y;
      }
      return innerFunction;
    }

    const addFive = outerFunction(5);
    console.log(addFive(3)); // 输出: 8
  </script>
  
</body>
</html>